<template>
  <div class="doctor-detail-container">
    <el-card class="detail-card">
      <!-- 标题区 -->
      <div class="header">
        <h2>医生详情</h2>
        <el-button
            type="primary"
            size="small"
            @click="handleBack"
            style="margin-left: auto">
          返回列表
        </el-button>
      </div>

      <!-- 详情表格 - 修改为带标签显示 -->
      <el-table
          :data="tableData"
          :show-header="false"
          border
          style="width: 100%">
        <el-table-column width="120"></el-table-column>
        <el-table-column>
          <template #default="{ row }">
            <template v-if="row.key === 'avatar'">
              <!-- 添加标签 -->
              <div class="field-label">头像</div>
              <el-avatar :size="80" :src="row.value" />
            </template>
            <template v-else-if="row.key === 'consultationFee'">
              <!-- 添加标签 -->
              <div class="field-label">咨询费</div>
              <div class="fee-tags">
                <el-tag type="info" >图文 {{ row.value.text }}元/次</el-tag>
                <el-tag type="warning"  style="margin-left: 10px">
                  电话 {{ row.value.phone }}元/15分钟
                </el-tag>
              </div>
            </template>
            <template v-else>
              <!-- 添加标签 -->
              <div class="field-label">{{ row.label }}</div>
              <div class="text-content">{{ row.value }}</div>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<script setup>
import {onMounted, ref, computed} from 'vue'
import {router} from "@/router/index.js";
import { ElMessage } from 'element-plus'
import axios from "axios";
import {useRoute} from "vue-router";

const route = useRoute()
// 医生数据
const doctorInfo = ref({})

// 将医生数据转换为表格需要的格式
const tableData = computed(() => {
  if (!doctorInfo.value) return []

  return [
    { key: 'name', label: '姓名', value: doctorInfo.value.name },
    { key: 'title', label: '职称', value: doctorInfo.value.title },
    { key: 'registrationFee', label: '挂号费', value: doctorInfo.value.registrationFee ? doctorInfo.value.registrationFee + '元' : '未设置' },
    {
      key: 'consultationFee',
      label: '咨询费',
      value: {
        text: doctorInfo.value.consultationFeeText,
        phone: doctorInfo.value.consultationFeePhone
      }
    },
    { key: 'expertise', label: '专长', value: doctorInfo.value.expertise },
    { key: 'description', label: '简介', value: doctorInfo.value.description },
    { key: 'avatar', label: '头像', value: doctorInfo.value.avatar }
  ]
})

const getDoctorInfo = () => {
  axios.get(`/doctor/getDoctorById/${route.params.id}`).then(res => {
    doctorInfo.value = res.data.obj
    ElMessage.success("查询成功!!")
  }).catch(err => {
    ElMessage.error("获取医生信息失败")
    console.error(err)
  })
}

onMounted(() => {
  getDoctorInfo()
})

// 返回列表
const handleBack = () => {
  router.push("/doctor")
}
</script>

<style scoped>
.doctor-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
}

.header {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

/* 表格样式 */
:deep(.el-table) {
  font-size: 14px;
}

:deep(.el-table__row td:first-child) {
  font-weight: bold;
  color: #606266;
  background-color: #fafafa;
  width: 120px;
}

:deep(.el-table__row td) {
  padding: 15px 10px;
  vertical-align: top;
}

.fee-tags {
  display: flex;
  align-items: center;
}

.text-content {
  white-space: pre-line;
  line-height: 1.6;
}
/* 添加新的样式 */
.field-label {
  font-weight: bold;
  color: #606266;
  margin-bottom: 8px;
  font-size: 13px;
}
</style>